<template>
  <div></div>
  <!-- 封装好的公共echarts -->
  <!-- <div class="chart-warpper" ref="chartRef" :style="{ height: height }"></div> -->
</template>

<!-- <script setup lang="ts">
  import {
    ref,
    unref,
    reactive,
    onMounted,
    shallowRef,
    defineOptions,
    withDefaults,
    defineExpose,
    defineProps,
    nextTick,
    onActivated,
    onBeforeUnmount,
    watch
  } from 'vue'
  import { useConfigStore } from '/@/stores/config'
  import { useEventListener } from '@vueuse/core'
  import { useNavTabsStore } from '/@/stores/navTabs'

  import * as echarts from 'echarts'
  import type { EChartsOption } from 'echarts'
  defineOptions({
    name: 'BaEchart'
  })
  interface Props {
    height?: string
    option: EChartsOption
  }
  const props = withDefaults(defineProps<Props>(), {
    height: '300px'
  })

  const useNavTabs = useNavTabsStore()
  const config = useConfigStore()
  const chartRef = shallowRef()
  const myChart = shallowRef()

  // 基于准备好的dom，初始化echarts实例
  const initChart = () => {
    myChart.value = echarts.init(chartRef.value as HTMLElement)
  }
  const echartsResize = () => {
    nextTick(() => {
      myChart.value.resize()
    })
  }

  onActivated(() => {
    echartsResize()
  })
  onMounted(() => {
    initChart()
    useEventListener(window, 'resize', echartsResize)
  })
  onBeforeUnmount(() => {
    myChart.value.dispose()
  })

  watch(
    () => props.option,
    () => {
      myChart.value.setOption(props.option)
    }
  )
  watch([
    () => useNavTabs.state.tabFullScreen,
    () => config.layout.menuCollapse,
    () => {
      setTimeout(() => {
        echartsResize()
      }, 300)
    }
  ])
  // 暴露方法给其他页面使用
  defineExpose({
    showLoading: () =>
      myChart.value.showLoading('default', {
        text: '',
        zleve: '10000',
        spinnerRadius: 15,
        lineWidth: 2,
        showSpinner: true,
        color: '#e52523'
      }),
    hideLoading: () => myChart.value.hideLoading(),
    registerMap: (mapName: string, rawDef: any, rawSpecialAreas?: any) =>
      echarts.registerMap(mapName, rawDef, rawSpecialAreas),
    echartsResize: () => echartsResize()
  })
</script> -->

<style lang="less" scoped></style>
